---
sidebar_position: 1
title: React
sidebar_label: Overview
---

> **`React Hyper Fetch`** is a data fetching library that implements the main features of the core library and adapts it
> to the React environment. It handles fetching, submitting, and queueing requests as well as their management in the
> system.

Together with the provided hooks, React Hyper Fetch makes maintaining and writing new functionalities faster and easier.

Note: A previously prepared [**request**](/core/request.mdx) is the minimum requirement for using hooks.

:::info

This package provide hooks for both: `core` and `sockets` subpackages.

:::

---

## Usage

To use hooks, we need to initialize the client and request instances that will be consumed as properties. Take a look at
the [Quick Start](/getting-started/quick-start.mdx) for more examples and check out our React code examples

```tsx
const { data, error, loading } = useFetch(getUsers);
```

```tsx
const { submit, data, error, submitting } = useSubmit(postLogin);
```

Check our **[react code examples](/guides/react/01-basics/fetching.mdx)**

---

## Helper hooks

To break down our hook setups into smaller parts, we implemented helper hooks. This enhances code readability; the idea
is that the main hook returns minor helpers, which lets us segregate our logic into smaller parts. It's quite simple, as
you can see in the example below:

```tsx
const {
  data,
  error,
  loading,
  onRequestStart,
  onResponseStart,
  onSuccess,
  onError,
  onDownloadProgress,
  onUploadProgress,
  onFinished,
  onAbort,
  onOffline,
} = useFetch(getUsers);

onRequestStart(({ details, request }) => {
  // Do something on query start
});

onResponseStart(({ response, details, request }) => {
  // Do something when query starts returning response
});

onSuccess(({ response, details, request }) => {
  // Do something on query success
});

onError(({ response, details, request }) => {
  // Do something on query fail
});

onAbort(({ response, details, request }) => {
  // Do something on query cancellation
});

onOffline(({ response, details, request }) => {
  // Do something when query goes stale while offline
});

onFinished(({ response, details, request }) => {
  // Do something on query finished (success or false)
});

onUploadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
  // Do something on upload
});

onDownloadProgress(({ progress, sizeLeft, timeLeft, total, loaded }) => {
  // Do something on download
});
```
